﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script type="text/javascript" src="../../Scripts/jquery.js"></script>
    <style>
        .aming_nav_frame {
            width: 400px;
            height: 104px;
            position: relative;
            padding: 5px;
        }

        .aming_nav_img_button {
            position: absolute;
            width: 204px;
            height: 104px;
            z-index: 999;
            overflow: hidden;
            border: 2px solid green;
            cursor: pointer;
        }

            .aming_nav_img_button img {
                position: absolute;
                width: 400px;
                height: 100px;
                border: 2px solid white;
            }


            .aming_nav_img_button .aming_nav_title {
                position: absolute;
                line-height: 40px;
                padding: 15px 10px 0px 10px;
                font-size: 24px;
                font-family: "Microsoft YaHei", "Microsoft JhengHei";
                bottom: 0;
                right: 0;
            }

        .aming_nav_img_button_defilade {
            width: 400px;
            height: 104px;
            position: absolute;
        }
    </style>
</head>
<body>
    <!-- <div class="aming_nav_frame" data-left="-90">
        <div class="aming_nav_img_button" style="border-color: #C5885B; color: #C5885B;">
            <img src="../../images/index/31532569_200_50_t.jpg" style="left: -90px;" />
            <div class="aming_nav_title">
                标题标题标题
            </div>
            <div class="aming_nav_img_button_defilade"></div>
        </div>
    </div>

    <div class="aming_nav_frame" data-left="-100">
        <div class="aming_nav_img_button" style="border-color: #7D52AE; color: #7D52AE;">
            <img src="../../images/index/32368289_200_50_t.jpg" style="left: -100px;" />
            <div class="aming_nav_title">
                标题标题标题
            </div>
            <div class="aming_nav_img_button_defilade"></div>
        </div>
    </div>
    <div class="aming_nav_frame" data-left="-90">
        <div class="aming_nav_img_button" style="border-color: #4E69AE; color: #4E69AE;">
            <img src="../../images/index/31532612_200_50_t.jpg" style="left: -90px;" />
            <div class="aming_nav_title">
                标题标题标题
            </div>
            <div class="aming_nav_img_button_defilade"></div>
        </div>
    </div>
    <div class="aming_nav_frame" data-left="-150">
        <div class="aming_nav_img_button" style="border-color: #EC709E; color: #EC709E;">
            <img src="../../images/index/34065982_200_50_t.jpg" style="left: -150px;" />
            <div class="aming_nav_title">
                标题标题标题
            </div>
            <div class="aming_nav_img_button_defilade"></div>
        </div>
    </div>
    <div class="aming_nav_frame" data-left="-180">
        <div class="aming_nav_img_button" style="border-color: #4CAC2A; color: #4CAC2A;">
            <img src="../../images/index/34178791_200_50_t.jpg" style="left: -180px;" />
            <div class="aming_nav_title">
                标题标题标题
            </div>
            <div class="aming_nav_img_button_defilade"></div>
        </div>
    </div>-->
    <duv id="test"></duv>

    <script type="text/javascript">
        $(document).ready(function () {
            $("#test").aming_nav({
                datalist: [{
                    left: -90,
                    color: "#C5885B",
                    imgurl: "../../images/index/31532569_200_50_t.jpg",
                    title: "标题标题标题",
                    link: "http://www.baidu.com",
                    target: true
                }, {
                    left: -90,
                    color: "#C5885B",
                    imgurl: "../../images/index/31532569_200_50_t.jpg",
                    title: "标题标题标题",
                    link: "http://www.y2443.com"
                }]
            });
        });
    </script>
</body>
</html>
<!-- 
    Load 事件

    弹出菜单和 收起菜单 效果的Function
    
    参数：
        边框颜色
        图片left
        图片的url
        Tilte
        Title Link


     -->
